<template>
  <div>
    <MyTable :list="list1">
      <!-- 3. 通过template #插槽名="变量名" 接收 -->
      <template #handle="obj">
        <button @click="del(obj)">删除</button>
      </template>
    </MyTable>

    <MyTable :list="list2">
      <template #handle="obj">
        <button @click="edit(obj)">编辑</button>
      </template>
    </MyTable>
    <MyDialog v-if="isShow">
      <template #head>
        <h3>编辑信息</h3>
      </template>
      <template #main>
        <label>姓名:
          <input type="text" name="username" v-model="username">
        </label> <br><br>
        <label>年龄:
          <input type="number" name="age" v-model="age">
        </label>
      </template>
      <template #footer>
        <button @click="isShow = false">取消</button>
        <button @click="submit">确认</button>
      </template>

    </MyDialog>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
import MyDialog from './components/MyDialog.vue';
export default {
  data() {
    return {
      list1: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ],
      isShow: false,
      username: '',
      age: '',
      editID: null
    }
  },
  components: {
    MyTable,
    MyDialog
  },
  methods: {
    del(obj) {
      console.log(obj)
      this.list1 = this.list1.filter(item => item.id !== obj.id)
    },
    edit(obj) {
      this.editID = obj.id
      this.isShow = true
      const info = this.list2.find(item => item.id === obj.id)
      this.username = info.name
      this.age = info.age
    },
    submit() {
      this.isShow = false
      const info = this.list2.find(item => item.id === this.editID)
      info.name = this.username
      info.age = this.age
    }
  }
}
</script>
